<script src="@/js/tool/qimen.js"></script>

<template>
  <div class="qimen" id="app">
    <div class="margins">

      <!-- 导航 -->
      <el-affix>
        <div class="affix">
          <Breadcrumb separator=">">
            <span v-for="item in navigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>

          <div class="divider">
            <el-divider />
          </div>

          <div class="prediction">
            <!-- 其他工具： -->
            <span v-for="item in fasts" :key="item" class="spacing">
              <router-link :to="item.link">
                <Tag color="default" class="tag">
                  <span class="item">{{ item.title }}</span>
                  <!-- <Icon :type="item.icon" /> -->
                </Tag>
              </router-link>
            </span>
            <span class="r"></span>
          </div>
        </div>
      </el-affix>

      <div v-if="dataStatus">

        <!-- ★ 示例数据、选项 ★ -->
        <div v-if="dataShiLiStatus">
          <Row class="sl-row">

            <!-- 1、示例数据 -->
            <Col span="16">
            <el-card shadow="never" class="sl-card">

              <template #header>
                <div class="header">
                  示例预览
                </div>
              </template>

              <Row>

                <!-- 1.1、基础数据 -->
                <Col span="10">
                <el-card shadow="never" class="jc-card">
                  <div class="data">

                    <div>
                      <span v-show="dateType === 0">
                        <Tag size="medium" color="#969696" class="tag">
                          <b>公历：</b>{{ data.solarStr }}
                        </Tag>
                      </span>
                      <span v-show="dateType === 1">
                        <Tag size="medium" class="tag">
                          <b>公历：</b>{{ data.solarStr }}
                        </Tag>
                      </span>
                    </div>

                    <div>
                      <span v-show="dateType === 0">
                        <Tag size="medium" class="tag">
                          <b>农历：</b>{{ data.lunarStr }}
                        </Tag>
                      </span>
                      <span v-show="dateType === 1">
                        <Tag size="medium" color="#969696" class="tag">
                          <b>农历：</b>{{ data.lunarStr }}
                        </Tag>
                      </span>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>干支：</b>{{ data.baZi.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>五行：</b>
                        <span v-for="index in data.baZiWuXing.length" :key="index">
                          <span v-html="wxc(data.baZiWuXing[index - 1])"></span>
                          <span v-if="index !== data.baZiWuXing.length">&nbsp;&nbsp;</span>
                        </span>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>空亡：</b>{{ data.baZiXunKong.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>纳音：</b>{{ data.baZiNaYin.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>节气：</b>{{ data.jieQi }}{{ data.sanYuan }}</Col>
                          <Col span="12"><b>局数：</b>{{ data.yinYangDun }}{{ data.juShu }}局</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>值符：</b>{{ data.zhiFu }}</Col>
                          <Col span="12"><b>值使：</b>{{ data.zhiShi }}</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>旬首：</b>{{ data.xunShou }}</Col>
                          <Col span="12"><b>驿马：</b>{{ data.yiMa }}</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>天乙：</b>{{ data.tianYi }}</Col>
                          <Col span="12"><b>地乙：</b>{{ data.diYi }}</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>月将：</b>{{ data.yueJiang }}</Col>
                          <Col span="12"><b>月将神：</b>{{ data.yueJiangShen }}</Col>
                        </Row>
                      </Tag>
                    </div>

                  </div>
                </el-card>
                </Col>

                <!-- 1.2、九宫格 -->
                <Col span="14">
                <el-card shadow="never" class="jgg-card">
                  <div class="data">
                    <div class="jgg">

                      <!-- 上半部分 -->
                      <div class="top">
                        <div class="left">
                          <span class="mark">{{ data.paiPanMark }}</span>
                        </div>
                        <div class="right">
                          <span class="yj">{{ data.yinYangDun }}{{ data.juShu }}局</span>
                        </div>
                      </div>

                      <!-- 下半部分 -->
                      <div class="bottom">

                        <div class="jg">

                          <!-- 转盘 -->
                          <div class="big" style="" v-if="data.paiPanType == 0">
                            <div class="small" v-for="index in 9">
                              <div>
                                <div class="yiKong">
                                  <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                  <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                                </div>
                              </div>
                              <div>
                                <span class="core" v-if="index !== 5">
                                  {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                </span>
                                <span class="status" v-if="index !== 5">
                                  {{ data.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                </span>
                              </div>
                              <div>
                                <div class="dun">
                                  {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                </div>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][0][1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][1][1] }}
                                </div>
                              </div>
                              <div>
                                <div class="core">
                                  <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                    <div>{{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}</div>
                                  </span>
                                  <span v-else>
                                    <div>芮</div>
                                  </span>
                                </div>
                                <div class="status">
                                  <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                    {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                  </span>
                                  <span class="qin" v-else>禽</span>
                                </div>
                                <div class="status" v-if="data.tianPan[jgw[index - 1] - 1] === '芮禽'">
                                  {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1].substring(0, 1) }}
                                </div>
                              </div>
                              <div>
                                <div class="core" v-if="index !== 5">
                                  {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][0][1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][1][1] }}
                                </div>
                              </div>
                              <div class="items marki">
                                <span :class="jgs[index - 1]">
                                  {{ jgm[index - 1] }}
                                </span>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                                </div>
                                <div class="status">
                                  {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                </div>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.diPan[jgw[index - 1] - 1] }}
                                </div>
                                <div class="status">
                                  {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                </div>
                                <div class="status">
                                  {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- 飞盘 -->
                          <div class="big" style="" v-if="data.paiPanType == 1">
                            <div class="small" v-for="index in 9">
                              <div>
                                <div class="yiKong">
                                  <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                  <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}</b>
                                </div>
                              </div>
                              <div>
                                <span class="core">
                                  {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                </span>
                                <span class="status">
                                  {{ data.jiuShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                </span>
                              </div>
                              <div>
                                <div class="dun">
                                  {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                </div>
                              </div>
                              <div></div>
                              <div>
                                <div class="core">
                                  {{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}
                                </div>
                                <div class="status">
                                  {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                </div>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                </div>
                                <div class="status">
                                  {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                </div>
                              </div>
                              <div class="items marki">
                                <span :class="jgs[index - 1]">
                                  {{ jgm[index - 1] }}
                                </span>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                                </div>
                                <div class="status">
                                  {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                </div>
                              </div>
                              <div>
                                <div class="core">
                                  {{ data.diPan[jgw[index - 1] - 1] }}
                                </div>
                                <div class="status">
                                  {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                </div>
                                <div class="status">
                                  {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>

                      </div>

                    </div>
                  </div>
                </el-card>
                </Col>

              </Row>
            </el-card>
            </Col>

            <!-- 2、选项 -->
            <Col span="8">
            <el-card shadow="never" class="xx-card">

              <template #header>
                <div class="header">
                  奇门排盘
                </div>
              </template>

              <div class="data">

                <div class="name">
                  <input placeholder="请输入姓名（选填）" v-model="name" maxlength="10" />
                </div>

                <div class="occupy">
                  <input placeholder="请输入占事（选填）" v-model="occupy" maxlength="10" @click="occupyPrompt" />
                </div>

                <div class="dateType">
                  <el-segmented class="segmented" v-model="dateTypeStr" :options="dateTypeOptions" />
                </div>

                <div class="sex">
                  <el-segmented class="segmented" v-model="sexStr" :options="sexOptions" />
                </div>

                <div class="date">
                  <el-date-picker :clearable="false" v-model="date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期" :editable="false" style="width:70%;" @change="initializeData" />
                  <Checkbox v-model="leapMonth" :disabled="!leapMonthStatus" class="leapMonth">
                    <span>闰月</span>
                  </Checkbox>
                </div>

                <div class="trueSolar">
                  <Checkbox v-model="trueSolar" class="trueSolar" disabled>
                    <span>真太阳时</span>
                  </Checkbox>

                  <!-- <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    <div style="color: #ffbf00;">
                      生效时间：每日6时~7时。
                    </div>
                    <br />
                    <div>
                      暂不支持使用真太阳时预览，请排盘后查看；<br />
                      此功能可能导致排盘速度缓慢或其他未知问题。
                    </div>
                  </template>
                  <Icon type="md-alert" />
                </el-tooltip> -->

                  <el-tooltip placement="top" :enterable="false">
                    <template #content>
                      <div>
                        功能正在完善中 ...
                      </div>
                    </template>
                    <Icon type="md-alert" />
                  </el-tooltip>

                  <span class="beta">&nbsp;beta&nbsp;</span>
                </div>

                <!-- <div class="address" v-if="trueSolar">
                <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    默认按照东八区120°经度时刻（标准时间）排盘；
                    <br />
                    若更换地区（非北京市的其他地区），则使用真太阳时排盘。
                  </template>
                  <Icon type="md-help-circle" />
                </el-tooltip>
                地区：
                <City transfer class="city" v-model="address" show-suffix @on-change="getAddressName" />
              </div> -->

                <div class="paiPanType">
                  排盘类型：
                  <el-segmented size="small" class="segmented" v-model="paiPanTypeStr" :options="paiPanTypeOptions" />
                </div>

                <div class="paiPanSystem">
                  排盘方法：
                  <el-segmented size="small" class="segmented" v-model="paiPanSystemStr" :options="paiPanSystemOptions"
                    disabled />
                  <span class="tip">
                    <el-tooltip placement="right" :enterable="false">
                      <template #content>
                        <div>
                          功能正在完善中 ...
                        </div>
                      </template>
                      <Icon type="md-construct" class="icon" />
                      <!-- <Icon type="ios-construct" class="icon" /> -->
                    </el-tooltip>
                  </span>
                </div>

                <div class="qiMenType">
                  奇门类型：
                  <el-segmented size="small" class="segmented" v-model="qiMenTypeStr" :options="qiMenTypeOptions" />
                  <el-tooltip placement="top" :enterable="false">
                    <template #content>
                      <div>
                        <b v-if="qiMenType === 0">
                          <Icon type="md-arrow-dropright-circle" />&nbsp;
                        </b>
                        <b>年家奇门：</b>主要用于整体的判断，较为宏观和长久。如：经济、形式、东南西北各方的发展状况及自然灾害等。
                      </div>
                      <div>
                        <b v-if="qiMenType === 1">
                          <Icon type="md-arrow-dropright-circle" />&nbsp;
                        </b>
                        <b>月家奇门：</b>主要用来预测一个月内所发生的事。如：考试、外出做官、经商出行及玄空风水等。
                      </div>
                      <div>
                        <b v-if="qiMenType === 2">
                          <Icon type="md-arrow-dropright-circle" />&nbsp;
                        </b>
                        <b>日家奇门：</b>可以预测一天内所发生的事。如：日常生活中的各种事件，从小事到大事等。
                      </div>
                      <div>
                        <b v-if="qiMenType === 3">
                          <Icon type="md-arrow-dropright-circle" />&nbsp;
                        </b>
                        <b>时家奇门：</b>可以预测每个时辰发生的事，应用最为广泛。如：婚姻、疾病、工作、求学考试、经营求财、官司诉讼等。
                      </div>
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>

                <div class="resetting" @click="resetting">
                  <Button shape="circle" size="small">
                    <Icon type="md-refresh" />
                    重置
                  </Button>
                  <Checkbox v-model="resDate" class="resDate">
                    <span>包括日期</span>
                  </Checkbox>
                </div>

                <div class="senior">
                  <Button shape="circle" size="small" @click="seniorDialog = true">
                    <Icon type="ios-settings" />
                    更多选项
                  </Button>
                </div>

                <div class="starts">
                  <el-button :disabled="!startsButton" style="width: 100%" class="button" @click="starts">
                    开始排盘
                    <span v-show="trueSolar" style="font-size:13px;">(真太阳时)</span>
                  </el-button>
                </div>

              </div>
            </el-card>
            </Col>

          </Row>
        </div>

        <!-- ★ 完整数据切换选项、完整数据 ★ -->
        <div v-if="!dataShiLiStatus">
          <Row class="wz-row">

            <!-- 1、完整数据切换选项 -->
            <Col span="3">
            <el-card shadow="never" class="wzqh-card">
              <div class="data">

                <div class="button1" @click="returnPaiPanPageMethod">
                  <Icon type="ios-undo" />
                  返回
                </div>

                <div class="button2" @click="dataAllPageMethod(1)">
                  <b v-show="dataAllPage === 1">
                    基本信息
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataAllPage !== 1">
                    基本信息
                  </span>
                </div>

                <div class="button2" @click="dataAllPageMethod(2)">
                  <b v-show="dataAllPage === 2">
                    信息解读
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataAllPage !== 2">
                    信息解读
                  </span>
                </div>

                <div class="button2" @click="gengduoPrompt">
                  更多信息 ...
                </div>

              </div>
            </el-card>
            </Col>

            <!-- 2、完整数据 -->
            <Col span="21">
            <el-card shadow="never" class="wz-card">
              <div class="data">

                <!-- 2.1、基本信息 -->
                <div class="jb" v-if="dataAllPage == 1">

                  <!-- 上半部分 -->
                  <div class="top">
                    <div class="left">
                      <span class="name">
                        <Ellipsis :text="data.name" :length="3" tooltip />
                      </span>
                      <span class="date">
                        <span class="mr">公历：{{ data.solarStr }}</span>
                        <span class="mr">农历：{{ data.lunarStr }}</span>
                        <span class="mr">星期：{{ data.week }}</span>
                        <span class="mr">局数：{{ data.yinYangDun }}{{ data.juShu }}局</span>
                        <span class="mr mark">{{ data.paiPanMark }}</span>

                      </span>
                    </div>
                  </div>

                  <!-- 下半部分 -->
                  <div class="bottom">
                    <Row>

                      <!-- 数据一 -->
                      <Col span="7">
                      <div class="jb1">

                        <Row class="bc1">
                          <Col span="24">
                          <span class="title">姓名</span>
                          <span>{{ data.name }}</span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="24">
                          <span class="title">性别</span>
                          <span>{{ data.sex }}</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="24">
                          <span class="title">占事</span>
                          <span v-if="data.occupy == ''" class="null">未知</span>
                          <span v-if="data.occupy != ''">{{ data.occupy }}</span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="24">
                          <span class="title">公历</span>
                          <span>{{ data.solarStr }}</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="24">
                          <span class="title">农历</span>
                          <span>{{ data.lunarStr }}</span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="24">
                          <span class="title">干支</span>
                          <span>{{ data.baZi.join('&nbsp;&nbsp;') }}</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="24">
                          <span class="title">五行</span>
                          <span v-for="index in data.baZiWuXing.length" :key="index">
                            <span v-html="wxc(data.baZiWuXing[index - 1])"></span>
                            <span v-if="index !== data.baZiWuXing.length">&nbsp;&nbsp;</span>
                          </span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="24">
                          <span class="title">空亡</span>
                          <span>{{ data.baZiXunKong.join('&nbsp;&nbsp;') }}</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="24">
                          <span class="title">纳音</span>
                          <span>{{ data.baZiNaYin.join('&nbsp;&nbsp;') }}</span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="12">
                          <span class="title">节气</span>
                          <span>{{ data.jieQi }}{{ data.sanYuan }}</span>
                          </Col>
                          <Col span="12">
                          <span class="title">局数</span>
                          <span>{{ data.yinYangDun }}{{ data.juShu }}局</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="12">
                          <span class="title">值符</span>
                          <span>{{ data.zhiFu }}</span>
                          </Col>
                          <Col span="12">
                          <span class="title">值使</span>
                          <span>{{ data.zhiShi }}</span>
                          </Col>
                        </Row>

                        <Row class="bc2">
                          <Col span="12">
                          <span class="title">旬首</span>
                          <span>{{ data.xunShou }}</span>
                          </Col>
                          <Col span="12">
                          <span class="title">驿马</span>
                          <span>{{ data.yiMa }}</span>
                          </Col>
                        </Row>

                        <Row class="bc1">
                          <Col span="12">
                          <span class="title">天乙</span>
                          <span>{{ data.tianYi }}</span>
                          </Col>
                          <Col span="12">
                          <span class="title">地乙</span>
                          <span>{{ data.diYi }}</span>
                          </Col>
                        </Row>

                        <Row class="bc3">
                          <Col span="12">
                          <span class="title">月将</span>
                          <span>{{ data.yueJiang }}</span>
                          </Col>
                          <Col span="12">
                          <span class="title">月将神</span>
                          <span>{{ data.yueJiangShen }}</span>
                          </Col>
                        </Row>

                      </div>
                      </Col>

                      <!-- 数据二 -->
                      <Col span="10">
                      <div class="jb2">

                        <div class="title">
                          奇门九宫盘
                        </div>

                        <div class="switch">
                          <el-switch v-model="jggMode" size="small" inline-prompt active-text="详细" inactive-text="精简"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff" />
                        </div>

                        <div class="divider">
                          <el-divider />
                        </div>

                        <div class="jg">

                          <!-- 颜色标注提示 -->
                          <div class="colorTiShi">
                            <div class="tit">
                              <Icon type="ios-color-palette" />
                              颜色提示
                            </div>
                            <div class="jx"><b>击邢</b></div>
                            <div class="rm"><b>入墓</b></div>
                            <div class="jxrm"><b>击邢+入墓</b></div>
                            <div class="mp"><b>门迫</b></div>
                            <div class="kw"><b>空亡</b></div>
                          </div>

                          <!-- 转盘 -->
                          <div v-if="data.paiPanType === 0">

                            <!-- 详细模式 -->
                            <div class="detailed">
                              <div class="big" v-show="jggMode">
                                <div class="small" v-for="index in 9" :key="index"
                                  @click="switchLuoGong(jgw[index - 1])">
                                  <div>
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                      <b class="xunKong">
                                        {{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}
                                      </b>
                                    </div>
                                  </div>
                                  <div>
                                    <span class="core" v-if="index !== 5">
                                      {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                    </span>
                                    <span class="status" v-if="index !== 5">
                                      {{ data.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                    </span>
                                  </div>
                                  <div>
                                    <div class="dun" v-if="data.jiuDun">
                                      {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core" v-if="index !== 5">
                                      <span
                                        v-html="jiXingRuMuMenPoColor(data.tianPanQiYiToTq[jgw[index - 1] - 1], data.jiXingRuMuLinkToTq[jgw[index - 1] - 1])"></span>
                                    </div>
                                    <div class="status" v-if="index !== 5">
                                      {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][0][1] }}
                                    </div>
                                    <div class="status" v-if="index !== 5">
                                      {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][1][1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                        <div>{{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}</div>
                                      </span>
                                      <span v-else>
                                        <div>芮</div>
                                      </span>
                                    </div>
                                    <div class="status">
                                      <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                        {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                      </span>
                                      <span class="qin" v-else>禽</span>
                                    </div>
                                    <div class="status" v-if="data.tianPan[jgw[index - 1] - 1] === '芮禽'">
                                      {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1].substring(0, 1) }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core" v-if="index !== 5">
                                      <span
                                        v-html="jiXingRuMuMenPoColor(data.tianPanQiYiExTq[jgw[index - 1] - 1], data.jiXingRuMuLinkExTq[jgw[index - 1] - 1])"></span>
                                    </div>
                                    <div class="status" v-if="index !== 5">
                                      {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][0][1] }}
                                    </div>
                                    <div class="status" v-if="index !== 5">
                                      {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][1][1] }}
                                    </div>
                                  </div>
                                  <div class="marki">
                                    <div class="item">
                                      <span :class="jgs[index - 1]">
                                        {{ jgm[index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      <span
                                        v-html="jiXingRuMuMenPoColor(data.renPan[jgw[index - 1] - 1].substring(0, 1), data.menPoLink[jgw[index - 1] - 1])"></span>
                                    </div>
                                    <div class="status">
                                      {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.diPan[jgw[index - 1] - 1] }}
                                    </div>
                                    <div class="status">
                                      {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                    </div>
                                    <div class="status">
                                      {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <!-- 精简模式 -->
                            <div class="reduce">
                              <div class="big" v-show="!jggMode">
                                <div class="small" v-for="index in 9" :key="index"
                                  @click="switchLuoGong(jgw[index - 1])">
                                  <div>
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                                        }}</b>
                                    </div>
                                  </div>
                                  <div>
                                    <span class="core" v-if="index !== 5">
                                      {{ data.shenPan[jgw[index - 1] - 1] }}
                                    </span>
                                  </div>
                                  <div>
                                    <div class="dun" v-if="data.jiuDun">
                                      {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.tianPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core" v-if="index !== 5">
                                      {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div class="marki">
                                    <!-- <div class="item">
                                      <span :class="jgs[index - 1]">
                                        {{ jgm[index - 1] }}
                                      </span>
                                    </div> -->
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.renPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.diPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                          </div>

                          <!-- 飞盘 -->
                          <div v-if="data.paiPanType === 1">

                            <!-- 详细模式 -->
                            <div class="detailed">
                              <div class="big" v-show="jggMode">
                                <div class="small" v-for="index in 9" :key="index"
                                  @click="switchLuoGong(jgw[index - 1])">
                                  <div>
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                      <b class="xunKong">
                                        {{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}
                                      </b>
                                    </div>
                                  </div>
                                  <div>
                                    <span class="core">
                                      {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                    </span>
                                    <span class="status">
                                      {{ data.jiuShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                    </span>
                                  </div>
                                  <div>
                                    <div class="dun" v-if="data.jiuDun">
                                      {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                    </div>
                                  </div>
                                  <div></div>
                                  <div>
                                    <div class="core">
                                      {{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}
                                    </div>
                                    <div class="status">
                                      {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      <span
                                        v-html="jiXingRuMuMenPoColor(data.tianPanQiYi[jgw[index - 1] - 1], data.jiXingRuMuLink[jgw[index - 1] - 1])"></span>
                                    </div>
                                    <div class="status">
                                      {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                    </div>
                                    <div class="status">
                                      {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                    </div>
                                  </div>
                                  <div class="marki">
                                    <div class="item">
                                      <span :class="jgs[index - 1]">
                                        {{ jgm[index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      <span
                                        v-html="jiXingRuMuMenPoColor(data.renPan[jgw[index - 1] - 1].substring(0, 1), data.menPoLink[jgw[index - 1] - 1])"></span>
                                    </div>
                                    <div class="status">
                                      {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.diPan[jgw[index - 1] - 1] }}
                                    </div>
                                    <div class="status">
                                      {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                    </div>
                                    <div class="status">
                                      {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <!-- 精简模式 -->
                            <div class="reduce">
                              <div class="big" v-show="!jggMode">
                                <div class="small" v-for="index in 9" :key="index"
                                  @click="switchLuoGong(jgw[index - 1])">
                                  <div>
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                                        }}</b>
                                    </div>
                                  </div>
                                  <div>
                                    <span class="core">
                                      {{ data.shenPan[jgw[index - 1] - 1] }}
                                    </span>
                                  </div>
                                  <div>
                                    <div class="dun" v-if="data.jiuDun">
                                      {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                    </div>
                                  </div>
                                  <div></div>
                                  <div>
                                    <div class="core">
                                      {{ data.tianPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div class="marki">
                                    <!-- <div class="item">
                                      <span :class="jgs[index - 1]">
                                        {{ jgm[index - 1] }}
                                      </span>
                                    </div> -->
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.renPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                  <div>
                                    <div class="core">
                                      {{ data.diPan[jgw[index - 1] - 1] }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                          </div>

                        </div>

                      </div>
                      </Col>

                      <!-- 数据三 -->
                      <Col span="7">
                      <div class="jb3">

                        <div class="title">
                          今日排盘
                        </div>

                        <div class="divider">
                          <el-divider />
                        </div>

                        <div class="date">
                          <Tag size="medium" class="tag">
                            <b>公历：</b>{{ year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + second + '秒'
                            }}
                          </Tag>
                          <Tag size="medium" class="tag mt">
                            <b>农历：</b>{{ nowLunarStr }}
                          </Tag>
                        </div>

                        <div class="sc" v-if="twelveHours && twelveHours.length !== 0">
                          <span v-for="index in twelveHours.length" :key="index">
                            <span v-if="twelveHours[index - 1] === nowDayHourGanZhi">
                              <el-button class="yes"
                                @click="setHourStarts(twelveHoursProve[index - 1].time, twelveHoursProve[index - 1].hourZhi)">
                                <span class="title-y">{{ twelveHours[index - 1] }}</span>
                              </el-button>
                            </span>
                            <span v-else>
                              <el-button class="no"
                                @click="setHourStarts(twelveHoursProve[index - 1].time, twelveHoursProve[index - 1].hourZhi)">
                                <span class="title-n">{{ twelveHours[index - 1] }}</span>
                              </el-button>
                            </span>
                          </span>
                        </div>

                        <div class="divider2">
                          <el-divider />
                        </div>

                        <div class="sxj">
                          <Row>
                            <Col span="8">
                            <div class="sj">
                              <el-button class="but" size="small" @click="shangXiaJu(false)">
                                <span class="text">
                                  <Icon type="ios-undo" />
                                  上一局
                                </span>
                              </el-button>
                            </div>
                            </Col>
                            <Col span="8">
                            <div class="dzxy">
                              <el-button class="but" size="small" type="info" @click="douZhuanXingYi">
                                <span class="text">
                                  <Icon type="md-sync" />
                                  移星换斗
                                  <Icon type="md-sync" />
                                </span>
                              </el-button>
                            </div>
                            </Col>
                            <Col span="8">
                            <div class="xj">
                              <el-button class="but" size="small" @click="shangXiaJu(true)">
                                <span class="text">
                                  下一局
                                  <Icon type="ios-share-alt" />
                                </span>
                              </el-button>
                            </div>
                            </Col>
                          </Row>
                        </div>

                        <div class="dzxyts">
                          <span v-show="douZhuanXingYiStatus">
                            <Icon type="md-volume-up" />
                            已移星换斗{{ douZhuanXingYiCount }}次
                          </span>
                          <span v-show="!douZhuanXingYiStatus">
                            &nbsp;
                          </span>
                        </div>

                        <div class="dzxyms">
                          <div>
                            <span class="titlel">移星换斗模式</span>
                            <el-segmented size="small" class="segmented" v-model="douZhuanXingYiModeStr"
                              :options="douZhuanXingYiModeOptions" />
                          </div>
                          <div>
                            <span class="titlel">移星换斗类型</span>
                            <el-segmented size="small" class="segmented type" v-model="douZhuanXingYiTypeStr"
                              :options="douZhuanXingYiTypeOptions" />
                          </div>
                        </div>

                      </div>
                      </Col>

                    </Row>

                    <!-- 数据四 -->
                    <div>
                      <el-card shadow="never" class="jb4-card">
                        <div class="datajb">
                          <el-tabs v-model="nTab" stretch="true">
                            <el-tab-pane :label="'伏吟（' + data.fuYin.length + '个）'" name="1">
                              <div v-if="data.fuYin.length !== 0" style="margin-bottom:-15px;">
                                <span v-for="item in data.fuYin" :key="item">
                                  <Tag size="large">{{ item }}</Tag>
                                </span>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'反吟（' + data.fanYin.length + '个）'" name="2">
                              <div v-if="data.fanYin.length !== 0" style="margin-bottom:-15px;">
                                <span v-for="item in data.fanYin" :key="item">
                                  <Tag size="large">{{ item }}</Tag>
                                </span>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'击邢（' + data.liuYiJiXing.length + '个）'" name="3">
                              <div v-if="data.liuYiJiXing.length !== 0" style="margin-bottom:-15px;">
                                <span v-for="item in data.liuYiJiXing" :key="item">
                                  <Tag size="large">{{ item }}</Tag>
                                </span>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'入墓（' + data.qiYiRuMu.length + '个）'" name="4">
                              <div v-if="data.qiYiRuMu.length !== 0" style="margin-bottom:-15px;">
                                <span v-for="item in data.qiYiRuMu" :key="item">
                                  <Tag size="large">{{ item }}</Tag>
                                </span>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>
                          </el-tabs>
                        </div>
                      </el-card>
                    </div>

                    <!-- 宫位切换按钮 -->
                    <el-affix :offset="60">
                      <div class="jb-button">
                        <div class="button">
                          <span v-for="index in luoGongTitle.length" :key="index">
                            <span>
                              <el-button v-if="luoGongIndex === index" size="small" class="yes">
                                <span class="da">
                                  <span v-if="index !== 5">
                                    {{ luoGongTitle[index - 1] }}
                                    ·
                                    <span v-if="data.yinYangGongMark[index - 1] == '内'" class="nei">
                                      {{ data.yinYangGongMark[index - 1] }}盘
                                    </span>
                                    <span v-if="data.yinYangGongMark[index - 1] == '外'" class="wai">
                                      {{ data.yinYangGongMark[index - 1] }}盘
                                    </span>
                                  </span>
                                  <span v-if="index == 5" class="ml">
                                    {{ luoGongTitle[index - 1] }}
                                  </span>
                                </span>
                              </el-button>
                              <el-button v-else size="small" @click="switchLuoGong(index)" class="no">
                                <span class="da">

                                  <span v-if="index !== 5">
                                    {{ luoGongTitle[index - 1] }}
                                    ·
                                    <span v-if="data.yinYangGongMark[index - 1] == '内'" class="nei">
                                      {{ data.yinYangGongMark[index - 1] }}盘
                                    </span>
                                    <span v-if="data.yinYangGongMark[index - 1] == '外'" class="wai">
                                      {{ data.yinYangGongMark[index - 1] }}盘
                                    </span>
                                  </span>
                                  <span v-if="index == 5" class="ml">
                                    {{ luoGongTitle[index - 1] }}
                                  </span>
                                </span>
                              </el-button>
                            </span>
                          </span>
                        </div>
                      </div>
                    </el-affix>

                    <!-- 数据六 -->
                    <div>
                      <el-card shadow="never" class="jb6-card">
                        <div class="datajb">

                          <!-- 单宫数据 -->
                          <div class="dg">

                            <!-- 转盘 -->
                            <div v-if="data.paiPanType === 0">

                              <div class="oneGong">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div>{{ data.tianPanQiYiToTq[luoGongIndex - 1] }}</div>
                                  <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                                  <div v-if="luoGongIndex !== 5">{{ data.tianPanQiYiExTq[luoGongIndex - 1] }}</div>
                                  <div v-else></div>
                                  <div></div>
                                  <div>{{ data.renPan[luoGongIndex - 1] }}</div>
                                  <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                                </div>
                                <div class="title-0">{{ luoGongTitle[luoGongIndex - 1] }}</div>
                              </div>

                              <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div v-if="undefined !== data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]">
                                    {{ data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1] }}
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][0][1] }}</div>
                                  <div></div>
                                  <div>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                                </div>
                                <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][0] }}</div>
                              </div>

                              <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div v-if="undefined !== data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]">
                                    {{ data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1] }}
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][1][1] }}</div>
                                  <div></div>
                                  <div>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                                </div>
                                <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][1] }}</div>
                              </div>

                              <div class="yueLing" v-if="luoGongIndex !== 5">
                                <div class="small">
                                  <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                                    {{ data.baGuaWangShuai[luoGongIndex - 1][0] + '：' + data.baGuaWangShuai[luoGongIndex
                                      - 1][1]
                                    }}
                                  </div>
                                  <div v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]">
                                    {{ data.jiuXingWangShuai[luoGongIndex - 1][0] + '：' +
                                      data.jiuXingWangShuai[luoGongIndex -
                                      1][1]
                                    }}
                                  </div>
                                  <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                                    {{ data.baMenWangShuai[luoGongIndex - 1][0] + '：' + data.baMenWangShuai[luoGongIndex
                                      - 1][1]
                                    }}
                                  </div>
                                </div>
                                <div class="title-2">月令</div>
                              </div>
                            </div>

                            <!-- 飞盘 -->
                            <div v-if="data.paiPanType === 1">

                              <div class="oneGong">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div></div>
                                  <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                                  <div>{{ data.tianPanQiYi[luoGongIndex - 1] }}</div>
                                  <div></div>
                                  <div>
                                    <span v-if="data.renPan[luoGongIndex - 1] === ''">-</span>
                                    <span v-else>{{ data.renPan[luoGongIndex - 1] }}</span>
                                  </div>
                                  <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                                </div>
                                <div class="title-0">{{ luoGongTitle[luoGongIndex - 1] }}</div>
                              </div>

                              <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div></div>
                                  <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                                  <div></div>
                                  <div>
                                    <span v-if="data.renPan[luoGongIndex - 1] === '中门'">-</span>
                                    <span v-else>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</span>
                                  </div>
                                  <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}</div>
                                </div>
                                <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][0] }}</div>
                              </div>

                              <div class="oneGong1" v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1">
                                <div class="small">
                                  <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                                    <div class="yiKong">
                                      <b class="yiMa">{{ data.yiMaGongMark[luoGongIndex - 1] }}</b>
                                      <b class="xunKong">{{ data.liuJiaXunKongGongMark[luoGongIndex - 1] }}</b>
                                    </div>
                                  </div>
                                  <div v-else></div>
                                  <div>{{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>
                                    <div class="dun">
                                      <span v-for="index in data.jiuDun[luoGongIndex - 1].length" :key="index">
                                        {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                                      </span>
                                    </div>
                                  </div>
                                  <div></div>
                                  <div>{{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}</div>
                                  <div>{{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                                  <div></div>
                                  <div>
                                    <span v-if="data.renPan[luoGongIndex - 1] === '中门'">-</span>
                                    <span v-else>{{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}</span>
                                  </div>
                                  <div>{{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}</div>
                                </div>
                                <div class="title-1">{{ jiuGongDiZhi[luoGongIndex - 1][1] }}</div>
                              </div>

                              <div class="yueLing">
                                <div class="small">
                                  <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                                    <span v-if="luoGongIndex === 5">-</span>
                                    <span v-else>
                                      {{ data.baGuaWangShuai[luoGongIndex - 1][0] + '：' +
                                        data.baGuaWangShuai[luoGongIndex -
                                        1][1] }}
                                    </span>
                                  </div>
                                  <div v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]">
                                    {{ data.jiuXingWangShuai[luoGongIndex - 1][0] + '：' +
                                      data.jiuXingWangShuai[luoGongIndex -
                                      1][1]
                                    }}
                                  </div>
                                  <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                                    <span
                                      v-if="data.baMenWangShuai[luoGongIndex - 1][0] === '中门' || data.baMenWangShuai[luoGongIndex - 1][0] === ''">
                                      -
                                    </span>
                                    <span v-else>
                                      {{ data.baMenWangShuai[luoGongIndex - 1][0] + '：' +
                                        data.baMenWangShuai[luoGongIndex -
                                        1][1] }}
                                    </span>
                                  </div>
                                </div>
                                <div class="title-2">月令</div>
                              </div>
                            </div>

                            <div class="mark">
                              <Icon type="ios-checkmark-circle" />
                              受移星换斗控制
                            </div>

                            <!-- 单宫取数 -->
                            <div class="quShu">
                              <div class="tit">取数</div>
                              <div class="hr"><el-divider /></div>
                              <div class="dat">
                                <div>先天：{{ jiuGongXianTianShu[luoGongIndex - 1] }}</div>
                                <div>后天：{{ jiuGongHouTianShu[luoGongIndex - 1] }}</div>
                                <div>五行：{{ jiuGongWuXingShu[luoGongIndex - 1] }}</div>
                                <div class="zong">总览：{{ jiuGongZongShu[luoGongIndex - 1] }}</div>
                              </div>
                            </div>

                            <!-- 内盘、外盘标识 -->
                            <div class="gMark" v-if="data.paiPanType === 0">
                              <div class="mark-n" v-show="data.yinYangGongMark[luoGongIndex - 1] == '内'"
                                @click="neiWaiPan(0)">
                                <b>内盘</b>
                              </div>
                              <div class="mark-w" v-show="data.yinYangGongMark[luoGongIndex - 1] == '外'"
                                @click="neiWaiPan(1)">
                                <b>外盘</b>
                              </div>
                            </div>

                          </div>

                        </div>
                      </el-card>
                    </div>

                    <!-- 数据七 -->
                    <div>
                      <el-card shadow="never" class="jb7-card">
                        <div class="datajb">
                          <el-tabs v-model="kyTab" stretch="true">

                            <el-tab-pane label="十干克应" name="1">
                              <div v-if="data.shiGanKeYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.shiGanKeYing[luoGongIndex - 1].length" :key="index">
                                  <Tag size="medium" class="tag">
                                    <b>{{ data.shiGanKeYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                  </Tag>
                                  <span class="item">
                                    {{ data.shiGanKeYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="八门克应" name="2">
                              <div v-if="data.baMenKeYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.baMenKeYing[luoGongIndex - 1].length" :key="index">
                                  <span v-if="'' !== data.baMenKeYing[luoGongIndex - 1][index - 1]">
                                    <Tag size="medium" class="tag">
                                      <b>{{ data.baMenKeYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                    </Tag>
                                    <span class="item">
                                      {{ data.baMenKeYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                    </span>
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="八门静应" name="3">
                              <div v-if="data.baMenJingYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.baMenJingYing[luoGongIndex - 1].length" :key="index">
                                  <Tag size="medium" class="tag">
                                    <b>{{ data.baMenJingYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                  </Tag>
                                  <span class="item">
                                    {{ data.baMenJingYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="八门动应" name="4">
                              <div v-if="data.baMenDongYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.baMenDongYing[luoGongIndex - 1].length" :key="index">
                                  <Tag size="medium" class="tag">
                                    <b>{{ data.baMenDongYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                  </Tag>
                                  <span class="item">
                                    {{ data.baMenDongYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="星门克应" name="5">
                              <div v-if="data.xingMenKeYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.xingMenKeYing[luoGongIndex - 1].length" :key="index">
                                  <Tag size="medium" class="tag">
                                    <b>{{ data.xingMenKeYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                  </Tag>
                                  <span class="item">
                                    {{ data.xingMenKeYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="九星时应" name="6">
                              <div v-if="data.jiuXingShiYing[luoGongIndex - 1][0] !== ''">
                                <div v-for="index in data.jiuXingShiYing[luoGongIndex - 1].length" :key="index">
                                  <Tag size="medium" class="tag">
                                    <b>{{ data.jiuXingShiYing[luoGongIndex - 1][index - 1].split('→')[0] }}</b>
                                  </Tag>
                                  <span class="item">
                                    {{ data.jiuXingShiYing[luoGongIndex - 1][index - 1].split('→')[1] }}
                                  </span>
                                </div>
                              </div>
                              <div v-else class="null ">暂无数据</div>
                              <div class="mark">
                                <Icon type="ios-checkmark-circle" />
                                受移星换斗控制
                              </div>
                            </el-tab-pane>

                          </el-tabs>
                        </div>
                      </el-card>
                    </div>

                    <!-- 数据八 -->
                    <div class="jb8">
                      
                      <div class="datajb">
                        <el-tabs v-model="guaTab" stretch="true">

                          <el-tab-pane label="门宫卦" name="1">
                            <div class="mark">
                              <Icon type="ios-checkmark-circle" />
                              受移星换斗控制
                            </div>
                            <div v-if="'' !== data.menGongJinBen[luoGongIndex - 1]">

                              <div class="jiBen">
                                <el-tag round size="large" type="info" class="tag">
                                  {{ data.menGongJinBen[luoGongIndex - 1] }}
                                </el-tag>
                              </div>

                              <div class="gua6">

                                <el-card shadow="never" class="card-b">
                                  <div class="naming">
                                    <span class="ym">爻名</span>
                                    <span class="gx">卦象</span>
                                    <span class="yc">爻辞</span>
                                  </div>
                                  <div class="yaoming" v-if="data.menGongGuaYaoMing[luoGongIndex - 1]">
                                    <div v-for="index in sixGuaIndex.length" :key="index">
                                      {{ data.menGongGuaYaoMing[luoGongIndex - 1][sixGuaIndex[index - 1]] }}
                                    </div>
                                  </div>
                                  <div class="guaxiang" v-if="data.menGongGuaXiang[luoGongIndex - 1]">
                                    <div>{{ data.menGongGuaXiang[luoGongIndex - 1] }}</div>
                                  </div>
                                  <div class="yaoci" v-if="data.menGongGuaYaoCi[luoGongIndex - 1]">
                                    <div v-for="index in sixGuaIndex.length" :key="index">
                                      <b>{{ data.menGongGuaYaoCi[luoGongIndex - 1][sixGuaIndex[index - 1]] }}</b>
                                    </div>
                                  </div>
                                  <div class="name">
                                    <el-tag round effect="dark" size="large" type="info" class="size">
                                      {{ luoGongTitle[luoGongIndex - 1] }} · {{ data.menGongGuaMing[luoGongIndex - 1] }}
                                    </el-tag>
                                  </div>
                                  <div class="divider">
                                    <el-divider border-style="dashed" />
                                  </div>
                                  <div class="ck">
                                    <span class="link">
                                      {{ data.menGongGuaYi[luoGongIndex - 1] }}
                                    </span>
                                  </div>
                                </el-card>
                              </div>
                            </div>
                            <div v-else class="null">暂无数据</div>
                          </el-tab-pane>

                          <el-tab-pane label="星宫卦" name="2">
                            <div class="mark">
                              <Icon type="ios-checkmark-circle" />
                              受移星换斗控制
                            </div>
                            <div v-if="'' !== data.xingGongJinBen[luoGongIndex - 1]">

                              <div class="jiBen">
                                <el-tag round size="large" type="info" class="tag">
                                  {{ data.xingGongJinBen[luoGongIndex - 1] }}
                                </el-tag>
                              </div>

                              <div class="gua6">

                                <el-card shadow="never" class="card-b">
                                  <div class="naming">
                                    <span class="ym">爻名</span>
                                    <span class="gx">卦象</span>
                                    <span class="yc">爻辞</span>
                                  </div>
                                  <div class="yaoming" v-if="data.xingGongGuaYaoMing[luoGongIndex - 1]">
                                    <div v-for="index in sixGuaIndex.length" :key="index">
                                      {{ data.xingGongGuaYaoMing[luoGongIndex - 1][sixGuaIndex[index - 1]] }}
                                    </div>
                                  </div>
                                  <div class="guaxiang" v-if="data.xingGongGuaXiang[luoGongIndex - 1]">
                                    <div>{{ data.xingGongGuaXiang[luoGongIndex - 1] }}</div>
                                  </div>
                                  <div class="yaoci" v-if="data.xingGongGuaYaoCi[luoGongIndex - 1]">
                                    <div v-for="index in sixGuaIndex.length" :key="index">
                                      <b>{{ data.xingGongGuaYaoCi[luoGongIndex - 1][sixGuaIndex[index - 1]] }}</b>
                                    </div>
                                  </div>
                                  <div class="name">
                                    <el-tag round effect="dark" size="large" type="info" class="size">
                                      {{ luoGongTitle[luoGongIndex - 1] }} · {{ data.xingGongGuaMing[luoGongIndex - 1]
                                      }}
                                    </el-tag>
                                  </div>
                                  <div class="divider">
                                    <el-divider border-style="dashed" />
                                  </div>
                                  <div class="ck">
                                    <span class="link">
                                      {{ data.xingGongGuaYi[luoGongIndex - 1] }}
                                    </span>
                                  </div>
                                </el-card>
                              </div>
                            </div>
                            <div v-else class="null">暂无数据</div>
                          </el-tab-pane>

                        </el-tabs>
                      </div>

                    </div>

                  </div>
                </div>

                <!-- 2.2、信息解读 -->
                <div class="jd" v-if="dataAllPage == 2">

                  <!-- 上半部分 -->
                  <div class="top">
                    <div class="left">
                      <span class="name">
                        <Ellipsis :text="data.name" :length="3" tooltip />
                      </span>
                      <span class="date">
                        <span class="mr">公历：{{ data.solarStr }}</span>
                        <span class="mr">农历：{{ data.lunarStr }}</span>
                        <span class="mr">星期：{{ data.week }}</span>
                        <span class="mr">局数：{{ data.yinYangDun }}{{ data.juShu }}局</span>
                        <span class="mr mark">{{ data.paiPanMark }}</span>

                      </span>
                    </div>
                  </div>

                  <!-- 下半部分 -->
                  <div class="bottom">

                    <!-- 数据一 -->
                    <div class="jb1">
                      <Collapse v-model="jgpCollapse">
                        <Panel name="1">
                          <span class="header">
                            奇门九宫盘
                          </span>
                          <template #content>

                            <div class="title">
                              奇门九宫盘
                            </div>

                            <div class="switch">
                              <el-switch v-model="jggMode" size="small" inline-prompt active-text="详细"
                                inactive-text="精简"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff" />
                            </div>

                            <div class="divider">
                              <el-divider />
                            </div>

                            <div class="jg">

                              <!-- 转盘 -->
                              <div v-if="data.paiPanType === 0">

                                <!-- 详细模式 -->
                                <div class="detailed">
                                  <div class="big" v-show="jggMode">
                                    <div class="small" v-for="index in 9" :key="index">
                                      <div>
                                        <div class="yiKong">
                                          <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                          <b class="xunKong">
                                            {{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1] }}
                                          </b>
                                        </div>
                                      </div>
                                      <div>
                                        <span class="core" v-if="index !== 5">
                                          {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                        </span>
                                        <span class="status" v-if="index !== 5">
                                          {{ data.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                        </span>
                                      </div>
                                      <div>
                                        <div class="dun" v-if="data.jiuDun">
                                          {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          <span
                                            v-html="jiXingRuMuMenPoColor(data.tianPanQiYiToTq[jgw[index - 1] - 1], data.jiXingRuMuLinkToTq[jgw[index - 1] - 1])"></span>
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][0][1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongToTqLink[jgw[index - 1] - 1][1][1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                            <div>{{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}</div>
                                          </span>
                                          <span v-else>
                                            <div>芮</div>
                                          </span>
                                        </div>
                                        <div class="status">
                                          <span v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'">
                                            {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                          </span>
                                          <span class="qin" v-else>禽</span>
                                        </div>
                                        <div class="status" v-if="data.tianPan[jgw[index - 1] - 1] === '芮禽'">
                                          {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1].substring(0, 1) }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core" v-if="index !== 5">
                                          <span
                                            v-html="jiXingRuMuMenPoColor(data.tianPanQiYiExTq[jgw[index - 1] - 1], data.jiXingRuMuLinkExTq[jgw[index - 1] - 1])"></span>
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][0][1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongExTqLink[jgw[index - 1] - 1][1][1] }}
                                        </div>
                                      </div>
                                      <div class="marki">
                                        <div class="item">
                                          <span :class="jgs[index - 1]">
                                            {{ jgm[index - 1] }}
                                          </span>
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          <span
                                            v-html="jiXingRuMuMenPoColor(data.renPan[jgw[index - 1] - 1].substring(0, 1), data.menPoLink[jgw[index - 1] - 1])"></span>
                                        </div>
                                        <div class="status">
                                          {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.diPan[jgw[index - 1] - 1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <!-- 精简模式 -->
                                <div class="reduce">
                                  <div class="big" v-show="!jggMode">
                                    <div class="small" v-for="index in 9" :key="index">
                                      <div>
                                        <div class="yiKong">
                                          <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                          <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                                            }}</b>
                                        </div>
                                      </div>
                                      <div>
                                        <span class="core" v-if="index !== 5">
                                          {{ data.shenPan[jgw[index - 1] - 1] }}
                                        </span>
                                      </div>
                                      <div>
                                        <div class="dun" v-if="data.jiuDun">
                                          {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.tianPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core" v-if="index !== 5">
                                          {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div class="marki">
                                        <!-- <div class="item">
                                          <span :class="jgs[index - 1]">
                                            {{ jgm[index - 1] }}
                                          </span>
                                        </div> -->
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.renPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.diPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                              </div>

                              <!-- 飞盘 -->
                              <div v-if="data.paiPanType === 1">

                                <!-- 详细模式 -->
                                <div class="detailed">
                                  <div class="big" v-show="jggMode">
                                    <div class="small" v-for="index in 9" :key="index"
                                      @click="switchLuoGong(jgw[index - 1])">
                                      <div>
                                        <div class="yiKong">
                                          <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                          <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                                            }}</b>
                                        </div>
                                      </div>
                                      <div>
                                        <span class="core">
                                          {{ data.shenPan[jgw[index - 1] - 1].substring(1, 2) }}
                                        </span>
                                        <span class="status">
                                          {{ data.jiuShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                        </span>
                                      </div>
                                      <div>
                                        <div class="dun" v-if="data.jiuDun">
                                          {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                        </div>
                                      </div>
                                      <div></div>
                                      <div>
                                        <div class="core">
                                          {{ data.tianPan[jgw[index - 1] - 1].substring(1, 2) }}
                                        </div>
                                        <div class="status">
                                          {{ data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          <span
                                            v-html="jiXingRuMuMenPoColor(data.tianPanQiYi[jgw[index - 1] - 1], data.jiXingRuMuLink[jgw[index - 1] - 1])"></span>
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.tianPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                        </div>
                                      </div>
                                      <div class="marki">
                                        <div class="item">
                                          <span :class="jgs[index - 1]">
                                            {{ jgm[index - 1] }}
                                          </span>
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          <span
                                            v-html="jiXingRuMuMenPoColor(data.renPan[jgw[index - 1] - 1].substring(0, 1), data.menPoLink[jgw[index - 1] - 1])"></span>
                                        </div>
                                        <div class="status">
                                          {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.diPan[jgw[index - 1] - 1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1] }}
                                        </div>
                                        <div class="status">
                                          {{ data.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1] }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <!-- 精简模式 -->
                                <div class="reduce">
                                  <div class="big" v-show="!jggMode">
                                    <div class="small" v-for="index in 9" :key="index"
                                      @click="switchLuoGong(jgw[index - 1])">
                                      <div>
                                        <div class="yiKong">
                                          <b class="yiMa">{{ data.yiMaGongMark[jgw[index - 1] - 1] }}</b>
                                          <b class="xunKong">{{ data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                                            }}</b>
                                        </div>
                                      </div>
                                      <div>
                                        <span class="core">
                                          {{ data.shenPan[jgw[index - 1] - 1] }}
                                        </span>
                                      </div>
                                      <div>
                                        <div class="dun" v-if="data.jiuDun">
                                          {{ data.jiuDun[jgw[index - 1] - 1].join('') }}
                                        </div>
                                      </div>
                                      <div></div>
                                      <div>
                                        <div class="core">
                                          {{ data.tianPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div class="marki">
                                        <!-- <div class="item">
                                          <span :class="jgs[index - 1]">
                                            {{ jgm[index - 1] }}
                                          </span>
                                        </div> -->
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.renPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                      <div>
                                        <div class="core">
                                          {{ data.diPan[jgw[index - 1] - 1] }}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                              </div>

                            </div>

                          </template>
                        </Panel>
                      </Collapse>
                    </div>

                    <!-- 数据二 -->
                    <div>
                      <el-card shadow="never" class="jb2-card">
                        <div class="datajb">
                          <el-tabs v-model="sTab" stretch="true">

                            <el-tab-pane label="急事参考" name="1">
                              <div>
                                {{ data.jiShiFangWeiInfo }}
                              </div>

                              <div class="ts">
                                <span class="ck" @click="jiShiDialog = true">
                                  断定方法
                                  <Icon type="ios-open-outline" />
                                </span>
                              </div>

                            </el-tab-pane>

                            <el-tab-pane label="缓事参考" name="2">
                              <div>
                                {{ data.huanShiFangWeiInfo }}
                              </div>

                              <div class="ts">
                                <span class="ck" @click="huanShiDialog = true">
                                  断定方法
                                  <Icon type="ios-open-outline" />
                                </span>
                              </div>

                            </el-tab-pane>

                          </el-tabs>
                        </div>
                      </el-card>
                    </div>

                  </div>
                </div>

              </div>
            </el-card>
            </Col>

          </Row>
        </div>

      </div>


      <!-- 更多选项弹窗 -->
      <Modal v-model="seniorDialog" scrollable="ture" class="seniorDialog" :styles="{ top: '50px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-settings" />
            更多选项
          </b>
        </template>

        <div>
          <Tabs size="small" style="min-height:210px; margin-top:-15px;">

            <TabPane label="通用选项">

              <div>
                节气算法：
                <Select transfer v-model="jieQi" style="width:71.5%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in jieQiOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="jieQi !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div style="margin-top:10px;">
                值使排法：
                <Select transfer v-model="zhiShi" style="width:71.5%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in zhiShiOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="zhiShi !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>
            </TabPane>

            <TabPane label="四柱选项">
              <div>
                年柱（年干支）排法：
                <Select transfer v-model="yearGanZhiSet" style="width:58%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in yearGanZhiSetOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="yearGanZhiSet !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>
              <div style="margin-top:10px;">
                月柱（月干支）排法：
                <Select transfer v-model="monthGanZhiSet" style="width:58%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in monthGanZhiSetOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="monthGanZhiSet !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>
              <div style="margin-top:10px;">
                日柱（日干支）排法：
                <Select transfer v-model="dayGanZhiSet" style="width:58%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in dayGanZhiSetOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="dayGanZhiSet !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>
              <div style="margin-top:10px;">
                时柱（时干支）排法：
                <Select transfer v-model="hourGanZhiSet" style="width:58%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in hourGanZhiSetOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
              </div>
            </TabPane>

            <TabPane label="飞盘奇门选项">

              <div>
                人盘排法：
                <Select transfer v-model="renPanFeiZhuan" style="width:71.5%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in renPanFeiZhuanOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="renPanFeiZhuan !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div style="margin-top:10px;" v-if="renPanFeiZhuan === 0">
                人盘转宫法：
                <Select transfer v-model="renPanZhuanGong" style="width:68.8%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in renPanZhuanGongOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="renPanZhuanGong !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div style="margin-top:10px;" v-if="renPanFeiZhuan === 1">
                人盘飞宫法：
                <Select transfer v-model="renPanFeiGong" style="width:68.8%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in renPanFeiGongOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="renPanFeiGong !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div style="margin-top:10px;">
                天盘飞宫法：
                <Select transfer v-model="tianPanFeiGong" style="width:68.8%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in tianPanFeiGongOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="tianPanFeiGong !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div style="margin-top:10px;">
                神盘飞宫法：
                <Select transfer v-model="shenPanFeiGong" style="width:68.8%;">
                  <template #prefix>
                    <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                      <Icon type="ios-compass-outline" />
                    </span>
                  </template>
                  <Option v-for="item in shenPanFeiGongOptions " :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <span v-if="shenPanFeiGong !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
                  <Icon type="md-arrow-dropleft-circle" />
                  非默认
                </span>
              </div>

              <div v-if="paiPanType !== 1" style="text-align:center; margin:5px 0 0 0; font-size:12px; color:#ff8c00;">
                <Icon type="md-alert" />
                当前选项未生效，请将排盘类型<span style="color:#3c91ec; cursor:pointer;"
                  @click="paiPanTypeSwitch"><u>切换</u></span>为飞盘后即可生效
              </div>

            </TabPane>

          </Tabs>
        </div>

        <template #footer>
          <Button long @click="seniorDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      <!-- 四柱转日期弹窗 -->
      <Modal v-model="siZhuDialog" scrollable="ture" class="siZhuDialog" :styles="{ top: '50px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-apps" />
            四柱转日期
          </b>
        </template>

        <div v-if="siZhuToDateTotal === 0" style="height:230px;">
          <div>
            年份查询范围：
            <input placeholder="请输入起始年份" v-model="beginYear" style="width:174px; margin-bottom:28px;" />
            年 ~ 至今
            <a @click="beginYear = 1900" style="font-size:12px; margin-left: 10px;">重置</a>
          </div>
          <div>
            年柱（年干支）：
            <Select transfer v-model="yearGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === yearGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </Option>
            </Select>
            <span v-if="yearGanZhi !== yearGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻年柱
            </span>
          </div>
          <div style="margin-top:10px;">
            月柱（月干支）：
            <Select transfer v-model="monthGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === monthGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </Option>
            </Select>
            <span v-if="monthGanZhi !== monthGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻月柱
            </span>
          </div>
          <div style="margin-top:10px;">
            日柱（日干支）：
            <Select transfer v-model="dayGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === dayGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </Option>
            </Select>
            <span v-if="dayGanZhi !== dayGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻日柱
            </span>
          </div>
          <div style="margin-top:10px;">
            时柱（时干支）：
            <Select transfer v-model="hourGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === hourGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </Option>
            </Select>
            <span v-if="hourGanZhi !== hourGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻时柱
            </span>
          </div>
        </div>
        <div v-if="siZhuToDateTotal !== 0" style="height:230px;">
          <Table height="220" size="small" highlight-row :columns="siZhuToDateColumns" :data="siZhuToDate">
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)">选择</Button>
            </template>
          </Table>
          <div style="text-align:center; color:#ababab; margin:5px 0 0 0; font-size:12px;">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{ siZhuToDateTotal }}&nbsp;条日期
            【{{ yearGanZhi2 + '&nbsp;' + monthGanZhi2 + '&nbsp;' + dayGanZhi2 + '&nbsp;' + hourGanZhi2 }}】
          </div>
        </div>

        <template #footer>
          <div style="text-align:center;">
            <span v-if="siZhuToDateTotal === 0">
              <Button v-if="siZhuButton" long @click="getSiZhuToDate" style="border-radius:5px;">获取日期</Button>
              <Button v-else long loading style="border-radius:10px;">日期获取中 ...</Button>
            </span>
            <Button v-else @click="siZhuToDateTotal = 0" long style="border-radius:5px;">重新获取</Button>
          </div>
        </template>
      </Modal>

      <!-- 急事断定方法 -->
      <Modal v-model="jiShiDialog" scrollable="ture" class="seniorDialog" :styles="{ top: '50px', minWidth: '650px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="md-bulb" />
            急事断定方法
          </b>
        </template>

        <div>
          <div>
            <b>
              《烟波钓叟歌》曰：“急则从神缓从门”，《奇门遁甲统宗》曰：“如逢急难，宜从值符方下而行”。
            </b>
          </div>
          <div>
            就是说：若事态紧急，没有充裕的时间选择三奇和吉门等，此时可以从天盘值符落宫方位或地盘值符落宫方位采取行动。
          </div>
        </div>

        <template #footer>
          <Button long @click="jiShiDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      <!-- 缓事断定方法 -->
      <Modal v-model="huanShiDialog" scrollable="ture" class="seniorDialog"
        :styles="{ top: '80px', minWidth: '650px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="md-bulb" />
            缓事断定方法
          </b>
        </template>

        <div class="box">
          <div>
            <b>
              《烟波钓叟歌》曰：“急则从神缓从门”。
            </b>
          </div>
          <div>
            就是说：若事态不太紧急，时间尚且比较充裕，此时可以选择吉时和吉位等。
          </div>
          <br />
          <div>
            <b>一、尽量避开五不遇时：时干克日干，并且必须为阳克阳、阴克阴。</b>
            <div style="margin-left:25px; color:#828282;">
              甲日庚午时、乙日辛巳时、丙日壬辰时、丁日癸卯时、戊日甲寅时、己日乙丑时、庚日丙子时、辛日丁酉时、壬日戊申时、癸日己未时。
            </div>
          </div>
          <br />
          <div>
            <b>二、尽量避开时干入墓方位：时干落入墓地宫位。</b>
            <div style="margin-left:25px; color:#828282;">
              丙戌时落乾六宫（西北方）、壬辰时落巽四宫（东南方）、癸未时落坤二宫（西南方）、戊戌时落乾六宫（西北方）、己丑时落艮八宫（东北方）、丁丑时落艮八宫（东北方）。
            </div>
          </div>
          <br />
          <div>
            <b>三、尽量避开年格、月格、日格、时格、大格、小格、刑格、悖格、飞干格、飞宫格、伏干格、伏宫格、三奇入墓、六仪击邢等凶格方位。</b>
          </div>
          <br />
          <div>
            <b>四、选择乙、丙、丁三奇和开、休、生三吉门和太阴、六合、九地、九天四吉神相会的方位。</b>
            <div style="margin-left:25px; color:#828282;">
              <p>1、若只有奇而没有吉门，这就叫奇不得门，还不能算是吉利方位。</p>
              <p>2、若只有吉门而没有奇，这就叫门不得奇，算是吉利方位。</p>
              <p>3、若即有奇又有吉门，这就是吉利方位。</p>
              <p>4、若没有奇又没有吉门，这就不是吉利方位；若遇吉格则可用，若遇凶格则不可用。</p>
              <p>5、若吉利方位有太阴，适宜伏藏、不易被发现等；有六合，适宜逃亡、退却等；有九地，适宜固守、以逸待劳等；有九天，适宜出击、先发制人等。</p>
              <p style="color:#505050;">
                （一般而言，会选择三奇和三吉门和四吉神所在方位，但还要看所做事情，如果是捕猎讨债，则可以用伤门；如果是吊唁送葬，则可以用死门；等。）
              </p>
              <p
                style="margin-left:-25px; color:#505050; background-color:#f0f0f0; border-radius:5px; text-align:center;">
                <b>吉门最重要，三奇和吉星次之，吉神可起辅助作用。</b>
              </p>
            </div>
            <br />
            <div>
              <b>五、择时择方也需要综合考虑，比如星、门、神、奇仪的吉凶，并结合节令与所落宫位的旺相休囚死进一步断定。</b>
              <div style="margin-left:25px; color:#828282;">
                例如：<br />
                <p>
                  1.1、生门五行属土，若落入艮八宫（土）、坤二宫（土）、离九宫（火），叫做得地；若时令在立春至春分前45天或四季月（辰月、戌月、丑月、未月），叫做得时；得地又得时，为旺相，这是真正的吉。
                </p>
                <p>
                  1.2、生门本来属于吉门，若落入震三宫（木）、巽四宫（木），叫做受制；若时令在七月、八月、十月、十一月，此时土处于休囚状态，既不得地又不得时，生门也会变的不吉。
                </p>
                <br />
                <p>
                  2、相反，凶门若得时又得地，则为真正的凶；若既不得地又不得时，凶门也会变的不凶。
                </p>
                <br />
                <p>
                  3、九星亦是如此，若遇旺相季节，叫做有气，吉星为吉、凶星为凶；若遇休囚废季节，叫做无气，吉凶程度都大幅降低。
                </p>
                <br />
                <p>
                  4、奇仪主要与门、宫、地盘奇仪之间的生克制化关系进行断定。如：乙奇五行属木，若遇休门（水）、坎一宫（水）、震三宫（木）、巽四宫（木），形成水生木或同类比和的局面，为吉；若遇开门（金）、乾六宫 ·
                  戌墓（金）、兑七宫（金），被金所克制，此时也会变的不吉。
                </p>
              </div>
            </div>
          </div>
        </div>

        <template #footer>
          <Button long @click="huanShiDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      <!-- 内盘说明 -->
      <Modal v-model="neiPanDialog" scrollable="ture" class="seniorDialog" :styles="{ top: '50px', minWidth: '700px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="md-bulb" />
            内盘
          </b>
        </template>

        <div>
          <div>
            <b>
              奇门的内盘、外盘以决速缓，决远近，决动静，不可不查。
            </b>
          </div>

          <br />

          <div style="background-color:rgb(245, 245, 245); border-radius:20px; padding:10px;">
            <span v-if="data.yinYangDun == '阳遁'">
              此局为{{ data.yinYangDun }}：坎一宫、震三宫、巽四宫、艮八宫为内盘。内盘主近、主速，通常与本地、本单位和本家人相关。
            </span>
            <span v-if="data.yinYangDun == '阴遁'">
              此局为{{ data.yinYangDun }}：坤二宫、乾六宫、兑七宫、离九宫为内盘。内盘主近、主速，通常与本地、本单位和本家人相关。
            </span>
          </div>

          <br /><br />

          <div>
            <b>例如（以此奇门局的日干为求测人、时干为求测之事。暂不考虑性别、面测或远测等）：</b>
            <br /><br />
            <div v-if="data.dayHourNeiWaiInfo">
              {{ data.dayHourNeiWaiInfo[0] }}
              {{ data.dayHourNeiWaiInfo[1] }}
            </div>
          </div>

        </div>

        <template #footer>
          <Button long @click="neiPanDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      <!-- 外盘说明 -->
      <Modal v-model="waiPanDialog" scrollable="ture" class="seniorDialog" :styles="{ top: '50px', minWidth: '700px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="md-bulb" />
            外盘
          </b>
        </template>

        <div>
          <div>
            <b>
              奇门的内盘、外盘以决速缓，决远近，决动静，不可不查。
            </b>
          </div>

          <br />

          <div style="background-color:rgb(245, 245, 245); border-radius:20px; padding:10px;">
            <span v-if="data.yinYangDun == '阳遁'">
              此局为{{ data.yinYangDun }}：坤二宫、乾六宫、兑七宫、离九宫为外盘。外盘主远、主慢，通常与本地、本单位和本家人相关。
            </span>
            <span v-if="data.yinYangDun == '阴遁'">
              此局为{{ data.yinYangDun }}：坎一宫、震三宫、巽四宫、艮八宫为外盘。外盘主远、主慢，通常与外地、外单位和外姓人相关。
            </span>
          </div>

          <br /><br />

          <div>
            <b>例如（以此奇门局的日干为求测人、时干为求测之事。暂不考虑性别、面测或远测等）：</b>
            <br /><br />
            <div v-if="data.dayHourNeiWaiInfo">
              {{ data.dayHourNeiWaiInfo[0] }}
              {{ data.dayHourNeiWaiInfo[1] }}
            </div>
          </div>

        </div>

        <template #footer>
          <Button long @click="waiPanDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>


    </div>
  </div>
</template>

<style scoped lang="scss" src="@/css/tool/qimen.scss"></style>
<style scoped lang="scss">
.box {
  height: 350px;
  overflow-y: auto;
}

.box::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.box::-webkit-scrollbar-track {
  // background: rgb(240, 240, 240);
}

.box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(200, 200, 200);
}

.box::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: rgb(185, 185, 185);
}

.box::-webkit-scrollbar-corner {
  background: rgb(185, 185, 185);
}
</style>